<template>
  <div>
    <Header></Header>
    <div id="background">
      <div id="content" style="min-height: auto">
        <v-card class="mx-auto my-12" style="height: 100%; width: 1000px">
          <header class="article-header">
            <h1 class="article-title">{{ barton_data.song_name }}</h1>
            <div class="article-meta">
              <span class="item">发布：{{ barton_data.release_time }}</span>
              <span class="item">阅读({{ barton_data.read_number }})</span>
              <span class="item">作者({{ barton_data.author }})</span>
            </div>
          </header>
          <article class="article-content">
            <p style="font-size: 15px; color: #808182">
              {{ barton_data.brief_introduction }}
            </p>
            <p
              style="text-align: center"
              v-for="(img, index) in barton_data.images"
              :key="index"
            >
              <img
                :src="'http://qmrcjhv9u.hb-bkt.clouddn.com/' + img"
                alt=""
                style="
                  width: 600px;
                  height: 883px;
                  border-width: 1px;
                  border-style: solid;
                "
              />
            </p>
          </article>
          <v-card-actions></v-card-actions>
        </v-card>
      </div>
      <div id="splus" class="splus" @click="speed_plus()"></div>
      <div id="splay" class="splay" @click="roll_show()" v-show="show"></div>
      <div id="ssub" class="ssub" @click="speed_subtract()"></div>
      <el-backtop target="body"></el-backtop>
      <div
        id="splay"
        class="spause"
        @click="roll_notshow()"
        v-show="not_show"
      ></div>
    </div>
  </div>
</template>
<script>
import Header from "../Base/Header.vue";
import { Message } from "element-ui";
export default {
  components: {
    Header,
  },
  data() {
    return {
      barton_data: {},
      show: 1,
      timer: 0,
      not_show: 0,
      speed: 500,
    };
  },
  // 钩子函数
  mounted: function () {
    this.get_song_details();
  },
  methods: {
    get_song_details() {
      var song_id = this.$route.query.id;
      this.axios
        .get("http://127.0.0.1:8000/barton/qiniu/", {
          params: { song_id: song_id },
        })
        .then((result) => {
          if (result.data.code == 200) {
            for (let index in result.data.data) {
              var images = result.data.data[index].images.split(",");
              this.barton_data = {
                id: result.data.data[index].id,
                song_name: result.data.data[index].song_name,
                author: result.data.data[index].author,
                brief_introduction: result.data.data[index].brief_introduction,
                images: images,
                read_number: result.data.data[index].read_number,
                release_time: result.data.data[index].release_time.split(
                  "T"
                )[0],
              };
            }
          } else {
            this.$message({
              type: "error",
              message: result.data.msg,
            });
          }
        });
    },
    roll_show() {
      this.show = 0;
      this.not_show = 1;
      this.autoSroll();
    },
    roll_notshow() {
      this.show = 1;
      this.not_show = 0;
      clearInterval(this.timer);
    },
    autoSroll() {
      this.timer = setInterval(this.roll, this.speed);
    },
    roll() {
      //获取当前滚动条高度
      var h = document.documentElement.scrollHeight;
      if (this.current > h) {
        //滚动到底端,返回顶端
        this.current = 0;
      } else {
        document.body.scrollTop += 1;
      }
    },
    speed_plus() {
      if (this.speed > 50) {
        clearInterval(this.timer);
        this.speed -= 50;
        this.autoSroll();
      }
    },
    speed_subtract() {
      clearInterval(this.timer);
      this.speed += 50;
      this.autoSroll();
    },
  },
};
</script>

<style>
@import url("http://www.shaomingyang.com/skin/css/main.css");
@import url("http://www.shaomingyang.com/skin/css/autogundong.css");
#background {
  height: 100%;
  overflow: hidden;
  background: url(../images/brang.png) repeat, center center / 100% 100%;
}
html,
body {
  height: calc(100% - 0.0001px);
  overflow: auto;
  position: relative;
}
.splay,
.splus,
.ssub,
.el-backtop,
.spause {
  right: 50px !important;
}
</style>